<template>
	<view class="configFontsize">
    <div v-if="list.length > 0" class="carOutside">
      <u-swipe-action>
        <u-swipe-action-item
          :show="item.show" 
          :options="options1" 
          bg-color="#fff"
          class="cart-item" 
          v-for="(item,index) in list"
          :key="item.id"
          @click="changeActionTab(index)" >
          <div class="listContent">
            <div class="radioBox">
              <div class="innerRadio">
                <checkbox-group activeBackgroundColor="#f00" @change="groupChange(index)"">
                  <checkbox class="round" style="transform:scale(0.8)" :checked="item.ischecked" />
                </checkbox-group>
              </div>
            </div>
            <div class="imgBox">
              <image :src="item.images" alt="" />
            </div>
            <div class="messageBox">
              <div class="msgTitle">{{item.title}}</div>
              <div class="msg">颜色：黑色&nbsp;&nbsp;尺码：XL</div>
              <div class="price">
                <div>
                  ￥{{item.numPrice}}
                </div>
                <div>
                  <u-number-box v-model="item.chooseNum" @change="valChange" @minus="item.chooseNum--" @plus="item.chooseNum++"></u-number-box>
                </div>
              </div>
            </div>
          </div>
        </u-swipe-action-item>
      </u-swipe-action>
    </div>
    
    <div v-else>
      <div class="postionImg">
        <u-empty
          mode="car"
          icon="http://cdn.uviewui.com/uview/empty/car.png"
        >
        </u-empty>
      </div>
    </div>
    <div class="bottomCarAcc">
      <div class="rodioword">
        <div class="innerRodio">
          <checkbox-group @change="changeAll">
            <checkbox class="round" style="transform:scale(0.8)" :checked="ischeckedAll" />
          </checkbox-group>
        </div>
      </div>
      <div class="world">
        总 计：￥{{ price }}
      </div>
      <div class="accButton">
        去 结 算
      </div>
    </div>
	</view>
</template>

<script>
	export default {
    components: {
      // uniSwipeAction
    },
    computed: {
      price(){
        return this.list.reduce((price, ele) => {
          if (ele.ischecked === true) {
            price += ele.numPrice * ele.chooseNum
          }
           return price
        },0)
      }
    },
    onShow(){
    },
		data() {
			return {
        valueTest: true,
        ischeckedAll: false,
        testVal: true,
        list: [
					{
						id: 1,
						title: '长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
            ischecked: true,
            chooseNum: 1,
            numPrice: 10
					},
					{
						id: 2,
						title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
            ischecked: false,
            chooseNum: 1,
            numPrice: 20
					},
					{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
            ischecked: false,
            chooseNum: 1,
            numPrice: 30
					}
				],

        value: 1,
      // 商品栏右侧滑动按钮
        options1: [
          {
            text: "删除",
            style: {
              backgroundColor: this.$lightColor, //高亮颜色
            },
          },
        ],
        value:''
			}
		},
    
		methods: {
      valChange(e) {
			},
      changeActionTab(val) {
        let arr = this.list
        arr.splice(val,1)
        console.log(arr);
        this.list = arr 
      },
      groupChange(val){
        let arr = this.list
        arr[val].ischecked = !arr[val].ischecked
        const ischeckedArr = []
        if (arr[val].ischecked) {
          for (const ele of arr) {
            if (ele.ischecked) {
              ischeckedArr.push(1)
            }
          }
          if (ischeckedArr.length === arr.length) {
            this.ischeckedAll = true
          }
        } else {
          this.ischeckedAll = false
        }
        this.list = arr
      },
      changeAll(){
        this.ischeckedAll = !this.ischeckedAll
        console.log(this.ischeckedAll);
        let arr = this.list
        for (const ele of arr) {
          this.ischeckedAll ? ele.ischecked = true : ele.ischecked = false
        }
        this.list = arr
      }
		}
	}
</script>

<style scoped lang="scss">
  @import "@/common/configStyle.scss";
  .round {
    border-radius: 50%;
  }
  ::v-deep .uni-checkbox-input {
    border-radius: 50%;
  }
//修改多选框的圆角
  .configFontsize {
    font-size: $ruyi-config-fontsize;
    background-color: $ruyi-config-backColor;
    min-height: 100vh;
  }
  .postionImg {
    width: 100%;
    position: absolute;
    top: 30%;
  }
  .carOutside {
    width: $ruyi-config-outSideWidth;
    padding: $ruyi-config-marginTop $ruyi-config-outSidePadding;
    .cart-item {
      transition: 0.35s;
    }
    .listContent {
      width: 96%;
      height: 200rpx;
      display: flex;
      border-radius: 10px;
      background-color: #fff;
      padding: $ruyi-config-padding 2%;
      margin-bottom: $ruyi-config-marginTop;
      .radioBox {
        width: 5%;
        height: 100%;
        position: relative;
        .innerRadio {
          height: 24rpx;
          width: 24rpx;
          position: absolute;
          top: 50%;
          transform: translate(0,-12rpx);
        }
      }
      .imgBox {
        width: 25%;
        height: 100%;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .messageBox {
        width: 68%;
        margin-left: 2%;
        height: 100%;
        position: relative;
        .msgTitle {
          width: 100%;
          font-weight: $ruyi-config-fontWight;
          height: 50rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
        }
        .msg {
          height: 50rpx;
          width: fit-content;
          padding: 0 $ruyi-config-padding;
          line-height: 50rpx;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background-color: #feb47b;
        }
        .price {
          position: absolute;
          bottom: 0;
          height: 50rpx;
          width: 100%;
          line-height: 50rpx;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .bottomCarAcc {
    width: 90%;
    padding: 0 5%;
    height: 100rpx;
    border-top: 2rpx solid $ruyi-config-backColor;
    position: fixed;
    bottom: 0;
    display: flex;
    .rodioword {
      height: 100%;
      width: 50rpx;
      position: relative;
      .innerRodio {
        position: absolute;
        top: 50%;
        transform: translateY(-18rpx);
      }
    }
    .world {
      line-height: 100rpx;
      font-size: 30rpx;
      margin-left: 15rpx;
    }
    .accButton {
      position: absolute;
      right: 2%;
      width: 200rpx;
      height: 60rpx;
      margin-top: 20rpx;
      border-radius: 20px;
      background: linear-gradient(to right, #ff7e5f, #feb47b);
      text-align: center;
      line-height: 60rpx;
      color: #fff;
    }
  }
</style>
